<!--
* @author: Jay
* @description: wx小程序-camera视频
* @createTime: 2024-08-30 13:48:27
 -->
<template>
	<view class="camera-position">
		<camera device-position="front" flash="auto" @error="onCameraError"
			:style="'width: 100%; height: '+ screenHeight +'px;'">
			<!-- 人脸轮廓-图片 -->
			<image src="../../static/face/face-avater.png" style="width: 100%; height: 55vh; margin:22vh 0 0 0;"
				v-if="!achieveShow"></image>
		</camera>

		<!-- 顶部提示信息 -->
		<view class="camera-top text-center" v-show="!achieveShow">
			<view class="text-lg text-red">
				请面向屏幕
			</view>
			<view class="text-xl text-white margin-tb-xs">
				<text class="text-lg">用普通话大声读</text>
				<text class="text-red text-bold margin-left-xs">123456</text>
			</view>
			<view class="text-xxl text-red">
				<text class="text-df text-white">倒计时</text>
				<text class="text-red text-bold margin-lr-xs">{{totalSeconds}}</text>
				<text class="text-df text-white">S</text>
			</view>
		</view>

		<!-- 完成拍摄 -->
		<view class="achieve-shade" :style="'width: 100%; height: '+ screenHeight +'px;'" v-if="achieveShow">
			<view class="" style="font-size: 120rpx;color: #1977FF;">
				<text class="cuIcon-roundcheck"></text>
			</view>
			<view class="text-xl text-white margin-tb-sm">
				已完成人脸识别
			</view>
			<button class="cu-btn line-blue round lg" @click="confirmBut">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cameraContext: null,
				//计时器
				timer: null,
				//录制时长
				totalSeconds: 10,
				//屏幕高度
				screenHeight: "",
				//是否显示-完成遮罩
				achieveShow: false
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: (res) => {
					console.log('屏幕宽度,单位为px：', res.windowWidth);
					console.log('屏幕高度,单位为px：', res.windowHeight);
					that.screenHeight = res.windowHeight;
				},
			});

			setTimeout(() => {
				this.startShoot()
			}, 500)
		},
		onReady() {
			// 创建 camera 上下文 CameraContext 对象
			this.cameraContext = uni.createCameraContext()
		},
		methods: {
			// 开始拍摄
			startShoot() {
				this.cameraContext.startRecord({
					timeoutCallback: () => {
						console.error('超出限制时长', this.totalSecond);
					},
					timeout: this.totalSeconds,
					success: (res) => {
						//开启计时器
						this.timer = setInterval(() => {
							this.totalSeconds--
						}, 1000)
						console.log(res, '开始拍摄');
					},
					fail: (err) => {
						this.errToast('摄像头启动失败，请重新打开')
					}
				})
			},
			// 结束拍摄
			stopShoot() {
				// 接触 计时器
				if (this.timer) clearInterval(this.timer)

				this.cameraContext.stopRecord({
					compressed: true,
					success: (res) => {
						//显示遮罩
						this.achieveShow = true
						// TODO 获取数据帧
						console.log(res, '结束拍摄');
					},
					fail: (err) => {
						this.errToast('视频保存失败，请重新录制')
					},
				})
			},
			// 摄像头错误
			onCameraError(error) {
				console.error('摄像头错误: ', error.detail);
			},
			//摄像头-失败操作
			errToast(e) {
				this.$operate.toast({
					title: e
				})
				setTimeout(() => {
					this.confirmBut()
				}, 500)
			},
			//确定-返回上一页
			confirmBut() {
				uni.navigateBack()
			},
		},
		watch: {
			//监听倒计时 
			totalSeconds: {
				handler(newVal) {
					// console.log(newVal, '倒计时');
					//倒计时 = 1 的时候结束拍摄 
					if (newVal == 1) {
						//结束拍摄
						this.stopShoot()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.camera-position {
		position: relative;

		.camera-top {
			position: absolute;
			left: 0;
			top: 50rpx;
			width: 100%;
		}

		.camera-bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		.achieve-shade {
			position: absolute;
			left: 0;
			top: 0;
			background-color: rgba(222, 222, 222, 0.9);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			button {
				width: 300rpx;
			}
		}
	}
</style>